<!-- 
     background-origin 属性相对于什么位置来定位
     padding-box 背景图像相对于内边距框来定位。	
     border-box	 背景图像相对于边框盒来定位。	
     content-box 背景图像相对于内容框来定位。
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div1">
        背景定位 - 使用background-position: right 10px bottom 10px; 当前padding:15px; border:10px;
    </div>
    <div class="div2">
        背景定位 - padding-box; 当前padding:15px; border:10px
    </div>
    <div class="div3">
        背景定位 - border-box; 当前padding:15px; border:10px
    </div>
    <div class="div4">
        背景定位 - content-box; 当前padding:15px; border:10px
    </div>
    <div class="div5">
        背景定位 - calc(100% - 10px) calc(100% - 10px);通过函数calc()计算得出. 当前padding:15px; border:10px
    </div>
</body>

</html>